<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>限定输入内容</title>
	</head>

	<body>
		<form>
			年份：<input type="text" naem="year" /><span id="yearError"></span>
			<br /> 月份 : <input type="text" name="month" /><span id="monthError"></span>
			<br />
			<button>查询</button>
		</form>
		<script>
			/*1、获取元素对象
						 2、验证年份的函数：4位数字
						 3、验证月份的函数：1-12数字 01-09或者1-9
						 4、年份和月份添加失去焦点事件*/
			var inputs = document.getElementsByTagName('input');
			var yearError = document.getElementById('yearError');
			var monthError = document.getElementById('monthError');
			//2、将验证年份的函数：4位数
			function checkYear(obj) {
				//验证obj内的值是否是4位数字
				var str = obj.value;
				//4位数字的正则表达式：\d表示0-9的数字，{n}表示前面的字符出现n次
				var reg = /^\d{4}$/;
				if(!str.match(reg)) { //不匹配
					yearError.innerHTML = "输入错误，年份为4位数字";
				} else
					yearError.innerHTML = '';
			}

			function checkMonth(obj) {
				var str = obj.value;
				var reg = /^(0?[1-9]|1[0-2])$/;
				if(!str.match(reg)) {
					monthError.innerHTML = "输入错误";
				} else
					monthError.innerHTML = '';
			}
			//年份输入框添加添加失去焦点事件
			inputs[0].onblur = function() {
				checkYear(this);
			}
			inputs[1].onblur = function() {
				checkMonth(this);
			}
	
		</script>
	</body>

</html>